<template>
  <div class="SearchBox">
    <input class="search-input" v-model="search">
    <i class="search-camera el-icon-camera"></i>
    <button class="search-submit" @click="submitSearch"><i class="el-icon-search"></i></button>
  </div>
</template>

<script>
export default {
  name: 'SearchBox',
  data() {
    return {
      search: ''
    };
  },
  methods: {
    async submitSearch () {
      const result = await this.Http.get('', {search: this.search})
      alert(result)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.SearchBox {
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-input,
.search-camera,
.search-submit {
  height: 50px; line-height: 50px;
  display: inline-block;
}
.search-input {
  width: 500px;
  border: 0px; margin: 0; padding: 0 10px;
  outline: none;
}
.search-camera{
  width: 50px;
  text-align: center;
  font-size: 26px;
  color: #999999;
  background-color: #ffffff;
}
.search-submit {
  width: 60px;
  text-align: center;
  font-size: 22px;
  color: #ffffff;
  background-color: #ff4c4f;
  border: 0px; margin: 0; padding: 0 10px;
  outline: none;

}
</style>
